import Vue from 'vue'

function drag(el) {
    el.style.width = Math.round(Math.random()*100 + 50) + 'px'
    el.style.height = Math.round(Math.random()*100 + 50) + 'px'
    el.style.background = "red"
    el.style.position = "absolute"
    let startX = 0 
    let startY = 0
    el.ontouchstart = function(e) {
        startX = e.touches[0].pageX - el.offsetLeft
        startY = e.touches[0].pageY - el.offsetTop
        document.ontouchmove = function(me) {
           el.style.left = me.touches[0].pageX - startX + 'px'
           el.style.top = me.touches[0].pageY - startY + 'px'
        }
    }

    el.ontouchend = function() {
        document.ontouchmove = null
    }
}



Vue.directive('drag', {
    bind(el) {
        // console.log(el)
        drag(el)
    }
})